<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
         <Button
          type="primary"
          icon="md-grid"
          style="margin: 0 10px 0 0"
          size="default"
          @click="exportData"
        >导出
        </Button>
        <Input
          placeholder="请输入查询购买单号"
          v-model="bloc.form.orderNum"
          style="width: 180px; margin-right: 10px"
        />
        <Input
          placeholder="请输入查询手机号"
          v-model="bloc.form.phone"
          style="width: 180px; margin-right: 10px"
        />
        <Select
          placeholder="查看全部"
          v-model="bloc.form.orderState"
          style="width: 200px; margin-right: 10px"
        >
          <Option v-for="item in bloc.stateList" :value="item" :key="item">{{ item }}</Option>
        </Select>
        <Select
          v-model="bloc.form.sortDirection"
          style="width: 200px; margin-right: 10px"
          placeholder="升降序"
        >
          <Option v-for="item in bloc.form.sortList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <DatePicker
          type="daterange"
          placeholder="下单时间"
          format="yyyy/MM/dd"
          v-model="bloc.form.date"
          :editable="false"
          style="width: 200px; margin-right: 10px"
        ></DatePicker>
        <Button
          type="primary"
          icon="ios-search"
          style="margin: 0 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
        >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
        >重置</Button
        >
      </div>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button
              size="small"
              @click="$router.push(`/order/detail/${row.OrderID}`)"
              v-if="Validation.check(Resources.BANNERS_UPDATE) && Validation.check(Resources.UPLOAD_IMAGE)"
              type="info"
            >详情
            </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
  </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import { Route } from 'vue-router';
    import { formatDate } from '@/base/util/Dates';
    import { Validation } from '@/base/Validation';
    import { OrderBloc } from './ListBloc';
    import { Resources } from '@/base/Resources';
    import { Order } from '@/base/model/Order';
import axios from "axios";
import { settings } from "@/config/Settings";
import Cookies from "js-cookie";
import { getDeviceMaintainList } from "@/base/api/DeviceMaintainApi";
    const columns = (bloc: OrderBloc) => [
        {
            title: '购买单号',
            key: 'OrderNumber',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: params.row.OrderNumber
                    }
                });
            },
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '消费者手机号',
            key: 'MobilePhone',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: params.row.MobilePhone
                    }
                });
            },
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '收货人',
            key: 'ConsigneeName',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '下单时间',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: formatDate(
                            new Date(params.row.SubmitTime),
                            'yyyy-MM-dd hh:mm:ss'
                        )
                    }
                });
            },
            width: 160,
            align: 'left',
            tooltip: true
        },
        {
            title: '总数量',
            key: 'Quantity',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '总金额（元）',
            key: 'Amount',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: (params.row.Amount / 100).toFixed(2)
                    }
                });
            },
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '实付款（元）',
            key: 'PaymentAmount',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: (params.row.PaymentAmount / 100).toFixed(2)
                    }
                });
            },
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '订单状态',
            key: 'OrderStage',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: bloc.getStatus(params.row.OrderStage)
                    }
                });
            },
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '操作',
            slot: 'action',
            width: 200,
            align: 'left',
            fixed: 'right'
        }
    ];
   
    @Component
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
                vm.bloc
                    .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
                    .catch((e) => {
                        vm.$Message.error('操作错误');
                    });
            });
        }
      exportData() {
           const url = `${
        process.env.NODE_ENV === "development"
          ? settings.baseUrl.dev
          : settings.baseUrl.pro
      }/api/post-sale/exportExcel`;
      const config = {
        responseType: "blob",
        headers: {
          Authorization: `Bearer ${Cookies.get("accessToken")}`,
        },
      };
      axios
        .get(url, config)
        .then((response) => {
          // console.log(response.data);
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "order.xlsx");
          document.body.appendChild(link);
          link.click();
        })
        .catch((error) => {
          console.error("导出失败", error);
        });
        }
        bloc: OrderBloc = new OrderBloc();
        Validation = Validation;
        columns = columns(this.bloc);
        Resources = Resources;

    }

</script>

<style lang="less">
</style>
